<template>
  <div class="code">
    <el-form :model="form">
      <el-form-item class="-enter-x">
        <h1 style="padding-left: 20px">二维码登录</h1>
      </el-form-item>
      <el-form-item class="-enter-x">
        <img src="/@/assets/img/code.png" class="code-img" alt="" />
      </el-form-item>
      <el-form-item class="-enter-x">
        <div class="other-type w100 flex-between">
          扫码后点击"确认"，即可完成登录
        </div>
      </el-form-item>
      <el-form-item class="-enter-x">
        <el-button
          class="flex-center w100 login-button"
          size="large"
          type="default"
          plain
          @click="emit('back')"
          >返回</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";

const form = reactive({});
const emit = defineEmits({
  back: null,
});
</script>

<style scoped lang="less">
.code-img {
  width: 240px;
  height: 240px;
  margin: 0 auto;
}
h1 {
  margin-bottom: 12px;
}
.other-type {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
  &::before,
  &::after {
    flex: 1;
    display: block;
    content: "";
    border-top: 1px solid rgba(229, 231, 235, 0.9);
  }
  &::before {
    margin-right: 10px;
  }
  &::after {
    margin-left: 10px;
  }
}
</style>
